<style lang="less">
  .chest-pain-report{
    width: 100%;
    height: ~'calc(100% + 50px)';
    .box-header{
      height: 80px;
      padding-left: 40px;
      padding-top: 20px;
      &-span {
        margin-right: 10px;
      }
    }
    .box-chart{
      height: ~'calc(100% - 80px)';
      background: #f0f2f5;
      padding: 20px 40px 20px 40px;
      &-top{
        height: 400px;
        width: 100%;
        padding-top: 40px;
        background: #fff;
      }
      &-bottom{
        height: ~'calc(100% - 420px)';
        width: 100%;
        padding: 30px;
        margin-top: 20px;
        background: #fff;
      }
      .chest-span {
        font-size: 22px;
        line-height: 22px;
        width: 100%;
        padding-left: 40px;
        text-align: left;
        display: inline-block;
      }
    }
    .chest-chart{
      width: 100%;
      height: 100%;
    }
  }
</style>

<template>
  <div class="chest-pain-report">
    <div class="box-header">
      <span class="box-header-span">时间范围</span>
      <el-date-picker
        v-model="timeRange"
        type="monthrange"
        value-format="yyyy-MM"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        @change="changeTime"
      />
      <span style="margin-left: 15px;" class="box-header-span">统计质控</span>
      <el-select v-model="qualityControl" @change="changeQuality">
        <el-option v-for="(item, index) in qualityControlList" :key="index" :label="item.label" :value="item.label" />
      </el-select>
    </div>
    <div class="box-chart">
      <div class="box-chart-top">
        <span class="chest-span">{{ qualityControl == 'DPT' ? 'DPT中位数' : 'DNT中位数' }}</span>
        <div ref="chestChartLine" class="chest-chart" />
      </div>
      <div class="box-chart-bottom">
        <div style="font-size: 16px; line-height: 16px; color: #666;">点击折线图显示对应患者数据</div>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          height="calc(100% - 48px)"
        >
          <el-table-column
            type="index"
            align="center"
            min-width="180px"
          />
          <el-table-column
            prop="num"
            label="患者编号"
            align="center"
            min-width="180px"
          />
          <el-table-column
            prop="name"
            label="患者姓名"
            align="center"
            min-width="180px"
          />
          <el-table-column
            prop="sex"
            label="性别"
            align="center"
            min-width="180px"
          />
          <el-table-column
            prop="age"
            label="年龄"
            align="center"
            min-width="180px"
          />
          <el-table-column
            prop="time"
            label="首次医疗接触"
            align="center"
            min-width="180px"
          />
          <el-table-column
            v-if="qualityControl == 'DPT'"
            prop="minutes"
            label="DPT（分钟）"
            align="center"
            min-width="180px"
          />
          <el-table-column
            v-if="qualityControl == 'DNT'"
            prop="minutes"
            label="DNT（分钟）"
            align="center"
            min-width="180px"
          />
        </el-table>
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageList.total"
          :page-size="pageList.page"
          :page-sizes="[10, 20, 30, 40]"
          :current-page="pageList.current"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getStatisticStroke, getStatisticStrokePatients, getStrokeSdcMedian } from '@/api/statistical/statistical-analysis'
export default {
  name: 'StrokeReport',
  data() {
    return {
      pageList: {
        total: 0,
        page: 20,
        current: 1
      },
      qualityControl: 'DPT',
      timeRange: [],
      startTime: '',
      endTime: '',
      qualityControlList: [{
        label: 'DPT',
        value: 'DPT'
      }, {
        label: 'DNT',
        value: 'DNT'
      }],
      tableData: [], // 表格数据
      loading: false, // 表格loading
      hospitalId: '', // 医院id
      clickTime: '' // 点击折线图时间
    }
  },
  mounted() {
    this.hospitalId = this.$store.getters.hospitalId
    this.init()
  },
  methods: {
    init() {
      if (this.timeRange && this.timeRange.length > 0) {
        this.startTime = this.timeRange[0]
        this.endTime = this.timeRange[1]
      } else {
        this.startTime = ''
        this.endTime = ''
      }
      getStrokeSdcMedian({
        hospitalId: this.hospitalId,
        item: this.qualityControl,
        startTime: this.startTime,
        endTime: this.endTime
      }).then(res => {
        if (res.code === 0) {
          this.getLineData(res.data.avgStrokeData, res.data.timeData)
        }
      })
    },
    // 获取折线图数据，并且点击事件
    getLineData(avgStrokeData, timeData) {
      const _this = this
      const chartLine = _this.$refs.chestChartLine
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '5%',
          right: '5%'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#F3F3F9'
              }
            },
            axisLabel: {
              color: '#666666'
            },
            data: timeData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: {
          type: 'value',
          name: '（分钟）',
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ['#F3F3F9']
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '中位数',
            type: 'line',
            itemStyle: {
              color: '#4380EA'
            },
            data: avgStrokeData
          }
        ]
      }
      if (chartLine) {
        const myChart = echarts.init(chartLine)
        myChart.off('click')
        myChart.setOption(option)
        myChart.on('click', function(parmas) {
          _this.loading = true
          _this.tableData = []
          _this.clickTime = parmas.name
          _this.pageList.current = 1
          getStatisticStrokePatients({
            hospitalId: _this.hospitalId,
            item: _this.qualityControl,
            selectTime: _this.clickTime,
            pageNum: _this.pageList.current,
            pageSize: _this.pageList.page
          }).then(res => {
            if (res.code === 0) {
              if (res.data) {
                _this.tableData = res.data.patients
                _this.pageList.total = res.data.count
                _this.loading = false
              }
            }
          })
        })
      }
    },
    // 改变页码
    handleSizeChange(val) {
      this.loading = true
      this.pageList.current = 1
      this.pageList.page = val
      getStatisticStrokePatients({
        hospitalId: this.hospitalId,
        item: this.qualityControl,
        selectTime: this.clickTime,
        pageNum: this.pageList.current,
        pageSize: this.pageList.page
      }).then(res => {
        if (res.code === 0) {
          if (res.data) {
            this.tableData = res.data.patients
            this.pageList.total = res.data.count
            this.loading = false
          }
        }
      })
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.loading = true
      this.pageList.current = val
      getStatisticStrokePatients({
        hospitalId: this.hospitalId,
        item: this.qualityControl,
        selectTime: this.clickTime,
        pageNum: this.pageList.current,
        pageSize: this.pageList.page
      }).then(res => {
        if (res.code === 0) {
          if (res.data) {
            this.tableData = res.data.patients
            this.pageList.total = res.data.count
            this.loading = false
          }
        }
      })
    },
    // 改变时间
    changeTime() {
      this.init()
    },
    // 统计质控
    changeQuality() {
      this.init()
    }
  }
}
</script>
